import React, { Component } from 'react'

export default class TabB extends Component {
  state = {
    name: "满200减2块",
    price: "",
    type: "3",
    status: "0",
    tips: ["元气满满"]
  }
  /**
   * 获取优惠券名字的表单绑定事件
   */
  bindEventByName = (event) => {
    console.log(event);
    console.log(event.target.value);
    this.setState({
      name: event.target.value
    })
  }
  /**
   * 处理多选框的选中操作
   * @returns 
   */
  bindEventCheck = (event) => {
    const { tips } = this.state
    const element = event.target
    if (element.checked) {
      this.setState({
        tips: [...tips, element.value]
      })
    } else {
      this.setState({
        tips: tips.filter(item => item != element.value)
      })
    }
  }
  render() {
    const { name, price, type, status, tips } = this.state
    return (
      <div>
        <form action="">
          <div>
            <label htmlFor="">优惠券名字</label>
            <input value={name} onChange={this.bindEventByName} type="text" placeholder='请输入名字' />
          </div>
          <div>
            <label htmlFor="">优惠券价格</label>
            <input value={price} onChange={(e) => this.setState({ price: e.target.value })} type="text" placeholder='请输入名字' />
          </div>
          <div>
            <label htmlFor="">优惠券类型</label>
            <select name="" id="" onChange={(e) => this.setState({ type: e.target.value })} value={type}>
              <option value="1">通用券</option>
              <option value="2">满减券</option>
              <option value="3">新人券</option>
            </select>
          </div>
          <div>
            <label htmlFor="">状态</label>
            <input type="radio" name='state' checked={status == "1"} onChange={(e) => { this.setState({ status: e.target.value }) }} value="1" />
            <input type="radio" name='state' checked={status == "0"} onChange={(e) => { this.setState({ status: e.target.value }) }} value="0" />
          </div>
          <div >
            <label htmlFor="">标签</label>
            <input type="checkbox" onChange={this.bindEventCheck} checked={tips.includes("元气满满")} value="元气满满" />
            <input type="checkbox" onChange={this.bindEventCheck} checked={tips.includes("精神爆棚")} value="精神爆棚" />
            <input type="checkbox" onChange={this.bindEventCheck} checked={tips.includes("运气炸裂")} value="运气炸裂" />
          </div>
          <div>
            <button type='button'>添加</button>
          </div>
        </form>
      </div>
    )
  }
}
